<template>
    <div class="admin">
        <el-container>
            <!--侧边栏-->
            <el-aside width="200px">
                <!--菜单-->
                <el-menu v-for="(obj,i) in menu"
                         background-color="rgb(81,90,110)"
                         text-color="#fff"
                         active-text-color="#ffd04b">

                    <el-submenu :index="obj.menuId">
                        <!---->
                        <template slot="title">
                            <i :class="obj.menuIcon"></i>
                            <span slot="title">
                                {{obj.menuName}}
                            </span>
                        </template>

                        <el-menu-item v-for="(item,j) in obj.sysMenuList"
                                      :index="item.menuId"
                                      class="item"
                                      @click="goPage(item.menuCode)">
                            <!--<i :class="item.menuIcon"></i>-->
                            <Icon :type="item.menuIcon" size="24"/>
                            <span slot="title">
                               {{item.menuName}}
                            </span>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>

            </el-aside>
            <!--右侧盒子-->
            <el-container>
                <!--头-->
                <el-header height="80px">

                    <!--概览图标-->
                    <div class="overview" v-if="teacherFlag" @click="goHome">
                        <Icon type="ios-home-outline" size="50"/>
                    </div>

                    <!--头像-->
                    <div class="block">
                        <!--下拉框-->
                        <el-dropdown>
                            <!--头像-->
                            <el-avatar shape="square"
                                       :size="50"
                                       :src="userInfo.headUrl">
                            </el-avatar>

                            <!--下拉选择-->
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item icon="el-icon-user"
                                                  @click.native="goUserCenter()">
                                    个人中心
                                </el-dropdown-item>

                                <el-dropdown-item icon="el-icon-switch-button"
                                                  divided
                                                  @click.native="logout()">
                                    退出登录
                                </el-dropdown-item>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>

                    <!--信息-->
                    <div class="info">

                        <!--点击徽标下拉-->
                        <Poptip trigger="click">
                            <!--徽标数-->
                            <Badge :count="5"
                                   class="badge"
                                   :offset="[10,5]">
                                <Icon type="ios-notifications-outline" size="26"></Icon>
                            </Badge>

                            <!--具体内容-->
                            <div slot="content" class="poptip">
                                fuck
                            </div>
                        </Poptip>

                        <div class="name">
                            {{userInfo.userName}}
                        </div>

                    </div>

                </el-header>

                <!--主体信息-->
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import {delCookie} from "@/tools/cookie";

    export default {
        name: "",
        components: {},
        data() {
            return {
                //用户id
                userId: this.$store.getters.getId,
                menu: [],
            }
        },
        methods: {
            //查询菜单
            selectMenu: function () {
                this.axios.get(`/login/sysMenu/menu/${this.userId}`)
                    .then((data) => {
                        this.menu = data.data
                    })
                    .catch((data) => {
                    })
            },
            //去概览页
            goHome: function () {
                this.$router.push("/");
            },
            //去个人中心
            goUserCenter: function () {
                this.$router.push("/userCenter");
            },
            //退出登录
            logout: function () {
                //删除 sessionStorage
                window.sessionStorage.clear();
                //删除 cookie
                delCookie("isLogin");
                delCookie("token");
                delCookie("userInfo");

                //刷新页面到首页
                this.$emit("my-event-app-login", false)
                window.location.replace("/")
            },
            //去对应页面
            goPage: function (name) {
                let path = this.$route.path;
                path = path.substr(1, path.length - 1);
                //轮播图
                if (name == "rotationChart" && name != path) {
                    this.$router.push("/rotationChart");
                }
                //课程
                if (name == "subject" && name != path) {
                    this.$router.push("/subject");
                }
                //问题
                if (name == "question" && name != path) {
                    this.$router.push("/question");
                }
                //导航
                if (name == "navigation" && name != path) {
                    this.$router.push("/navigation");
                }

                //用户
                if (name == "user" && name != path) {
                    this.$router.push("/user");
                }
                //角色
                if (name == "role" && name != path) {
                    this.$router.push("/role");
                }
                //菜单
                if (name == "menu" && name != path) {
                    this.$router.push("/menu");
                }
                //文件
                if (name == "file" && name != path) {
                    this.$router.push("/file");
                }
            }
        },
        computed: {
            userInfo: function () {
                return this.$store.getters.getUserInfo
            },
            //还有 CoursList.Vue 里也有
            teacherFlag: function () {
                let flag = true;
                let sysRoles = this.$store.getters.getUserInfo.sysRoles;
                for (let i = 0; i < sysRoles.length; i++) {
                    if (sysRoles[i].def == 1 && sysRoles.length == 1) {
                        flag = false
                    }
                }
                return flag
            }
        },
        mounted() {
            this.selectMenu();
        }
    }
</script>

<style>
    .admin {
        min-height: 100vh;
        width: 100%;
        background-color: #dedede;
    }

    /*侧边栏*/
    .admin .el-aside {
        min-height: 100vh;
        height: auto;
        background-color: rgb(81, 90, 110);
    }

    .admin .el-aside .item {
        background-color: rgb(54, 62, 79) !important;
    }

    /*头*/
    .admin .el-header {
        background-color: #FFF;
    }

    /*头像盒子*/
    .admin .el-header .block {
        width: 54px;
        height: 54px;
        float: right;
        border: 2px solid #D5D5D5;
        border-radius: 4px;
        margin: 14px 15px 0px 0px;
    }

    /*信息盒子*/
    .admin .el-header .info {
        /*width: 100px;*/
        height: 54px;
        float: right;
        border-radius: 4px;
        color: #515A6E;
        font-size: 20px;
        line-height: 54px;
        margin: 14px 15px 0px 0px;
    }

    /*徽标*/
    .admin .el-header .info .badge {
        height: 54px;
        margin: 0px 20px 0px 0px;
    }

    /*名称*/
    .admin .el-header .info .name {
        float: right;
    }

    /*概览盒子*/
    .admin .el-header .overview {
        width: 50px;
        height: 50px;
        float: left;
        border-radius: 4px;
        line-height: 50px;
        margin: 14px 0px 0px 0px;
    }


    /*主体*/
    .admin .el-main {
        background-color: #FFF;
        /*min-height: 100vh;*/
        height: auto;
        margin: 10px 0px 0px 10px;
    }


    /*点击徽标下拉框样式*/
    .admin .el-header .info .poptip {
        width: 240px;
        min-height: 150px;
        border-radius: 4px;
        border: 1px solid black;
    }
</style>